<template>
	<u-popup round="16rpx" :show="show" zIndex="100" :overlay="false">
		<view class="user-model-body">
			<view class="icon-close" @click="closeAttr" >
				<u-icon name="close" size="32rpx"/>
			</view>
			<view class="mp-data">
				<image src="@/static/images/icon-wechatapp.png" mode=""></image>
				<text class="mp-name">{{mpData.site_name || ''}} 申请</text>
			</view>
			<view class="trip-msg">
				<view class="title">获取您的昵称、头像</view>
				<view class="trip">提供具有辨识度的用户中心界面</view>
			</view>
			<form @submit="formSubmit">
				<view class="edit">
					<view class="avatar edit-box">
						<view class="left">
							<view class="head">头像</view>
							<view class="avatar-box" v-if="!mp_is_new" @click.stop='uploadpic'>
								<image :src="userInfo.avatar || defHead"></image>
							</view>
							<button v-else class="avatar-box" hover-class="none" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image :src="userInfo.avatar || defHead"></image>
							</button>
						</view>
					</view>
					<view class="nickname edit-box">
						<view class="left">
							<view class="head">昵称</view>
							<view class='input' @touchstart.stop="handleTouchInput">
								<input type='nickname' placeholder-class="pl-sty"
									placeholder="请输入昵称" name='nickname' :maxlength="16"
									:value='userInfo.nickname' :focus="focus"></input>
							</view>
						</view>
					</view>
				</view>

				<view class="bottom">
					<button class="save" formType="submit" :class="{'open': userInfo.avatar}">保存</button>
				</view>
			</form>
		</view>
	</u-popup>

</template>

<script>
	import upload from '@/api/upload.js'
	export default {
		props: {
			value: {
				type: Boolean,
				value: true
			}
		},
		data() {
			return {
				defHead: require('@/static/images/avatar.png'),
				mp_is_new:false,
				userInfo: {
					avatar: '',
					nickname: '',
				},
				mpData: {
					site_name: '鼎钻'
				},
				canvasStatus: false,
				focus: false,
				showPrivacy: false
			};
		},
		computed: {
			show: {
				get() {
					return this.value
				},
				set(val) {
					console.log(val)
					this.$emit('input', val)
				}
			}
		},
		mounted() {
			const version = uni.getSystemInfoSync().SDKVersion;
			if(this.compareVersion(version, '2.21.2') >= 0){
				this.mp_is_new = true;
			}
		},
		methods: {
			/**
			 * 小程序比较版本信息
			 * @param v1 当前版本
			 * @param v2 进行比较的版本
			 * @return boolen
			 *
			 */
			compareVersion(v1, v2) {
				v1 = v1.split('.')
				v2 = v2.split('.')
				const len = Math.max(v1.length, v2.length)

				while (v1.length < len) {
					v1.push('0')
				}
				while (v2.length < len) {
					v2.push('0')
				}

				for (let i = 0; i < len; i++) {
					const num1 = parseInt(v1[i])
					const num2 = parseInt(v2[i])

					if (num1 > num2) {
						return 1
					} else if (num1 < num2) {
						return -1
					}
				}
				return 0
			},
			uploadpic() {
				let _this = this
				this.$verify.checkPrivacy(() => {
					uni.chooseImage({
						count: 1,
						success: (res)=>{
							let file = res.tempFilePaths[0]
							console.log(file)
							upload(file).then(res => {
								_this.userInfo.avatar = res.data
							})
						},
						fail: (err)=>{
							console.log(err)
						},
						complete: ()=>{}
					})
				})

			},
			// 微信头像获取
			onChooseAvatar(e) {
				const {avatarUrl} = e.detail
				this.userInfo.avatar = avatarUrl
				upload(avatarUrl).then(res => {
					this.userInfo.avatar = res
				})
			},
			closeAttr() {
				this.show = false
				this.$emit('closeEdit');
			},
			handleTouchInput() {
				let _this = this;
				wx.getPrivacySetting({
					success: res => {
						_this.focus = false
						if (res.needAuthorization) {
							_this.$bus.$on('privacyResult', (data) => {
								_this.focus = data == 'agree'
							})
							_this.$bus.$emit('openPrivacy')
						} else {
							this.$nextTick(() => {
								_this.focus = true
							})
						}
					}
				})
			},
			/**
			 * 提交修改
			 */
			formSubmit(e) {
				let that = this
				if (!this.userInfo.avatar) {
					uni.showToast({
						icon: 'none',
						title: '请上传头像'
					})
					return
				}
				if (!e.detail.value.nickname) {
					uni.showToast({
						icon: 'none',
						title: '请输入昵称'
					})
					return
				}
				this.userInfo.nickname = e.detail.value.nickname;
				this.$emit('editSuccess',this.userInfo)
			}
		}
	}
</script>
<style>
	.pl-sty {
		color: #999999;
		font-size: 30rpx;
	}
</style>
<style lang="scss">
	.user-model-body {
		padding: 32rpx;
		.icon-close {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #999;
			padding: 10rpx;
		}

		.mp-data {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.mp-name {
				font-size: 28rpx;
				font-weight: bold;
				color: #000000;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}
		}

		.trip-msg {
			padding-bottom: 32rpx;
			border-bottom: 1px solid #F5F5F5;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
				margin-bottom: 6rpx;
			}

			.trip {
				font-size: 26rpx;
				color: #777777;
			}
		}

		.edit {
			border-bottom: 1px solid #F5F5F5;

			.avatar {
				border-bottom: 1px solid #F5F5F5;
			}

			.nickname {
				.input {
					width: 100%;

				}

				input {
					height: 80rpx;
				}
			}

			.edit-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				padding: 22rpx 0;

				.left {
					display: flex;
					align-items: center;
					flex: 1;

					.head {
						color: rgba(0, 0, 0, 0.9);
						white-space: nowrap;
						margin-right: 60rpx;
					}

					button {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 84rpx;
						height: 84rpx;
						border-radius: 6rpx;
						margin: unset;
						padding: unset;
						border: unset;
					}
				}

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 6rpx;
				}
			}

			.icon-xiangyou {
				color: #cfcfcf;
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: center;

			.save {
				border: 1px solid #F5F5F5;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 368rpx;
				height: 80rpx;
				border-radius: 12rpx;
				margin-top: 52rpx;
				background-color: #F5F5F5;
				color: #ccc;
				font-size: 30rpx;
				font-weight: bold;
			}

			.save.open {
				border: 1px solid #fff;
				background-color: #07C160;
				color: #fff;
			}
		}
	}
	.avatar-box {
		display: flex;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
		}
	}
</style>
